<template>
  <el-dialog title="数据导入" v-model="show" width="1024px">
    <el-button>
      <div class="transparent">
        <input
          type="file"
          class="transparent-input"
          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
          @change="handleImport"
        />
        文件选择
      </div>
    </el-button>
  </el-dialog>
</template>

<script setup>
import { http } from 'jax-node'

const emits = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  data: { type: Object, default: () => {} },
})

const show = computed({
  get: () => props.modelValue,
  set: val => emits('update:modelValue', val),
})

const handleImport = e => {
  const formData = new FormData()
  const files = e.target.files

  formData.append('files', files[0])

  http({
    url: '/system/upload',
    method: 'post',
    data: formData,
    params: {
      bucket: 'temp',
    },
    showLoading: '上传中...',
  })
    .then(res => {
      e.target.value = null

      console.log('res', res)
      // http({
      //   url: '/staff/import',
      //   method: 'post',
      //   data: {
      //     url: res.data[0].url,
      //   },
      //   showLoading: '导入中...',
      //   successMsg: true,
      // }).then(res => {
      //   setTimeout(() => {
      //     pageState.refresh()
      //   }, 1000)
      // })
    })
    .catch(e => {
      e.target.value = null
    })
}
</script>

<style lang="scss" scoped>
.transparent {
  position: relative;
  width: fit-content;
}

.transparent-input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  cursor: pointer;
}
</style>
